import useInfiniteScroll from "@/hooks/useInfiniteScroll"
import MusicCard from "@/pages/alingcenter/List/MUSIC/components/MusicCard"
import { Zoom } from "@mui/material"
import { Box } from "@mui/system"
import { useRequest } from "ahooks"
import FilePreview from "aling/dist/lib/WCStylecomponents/Uploader/components/FilePreview"
import FileViewer from "aling/dist/lib/WCStylecomponents/Uploader/components/FileViewer"
import { InfiniteScroll } from "antd-mobile"
import React, { useState } from "react"
export interface ResourceListProps {
  sourceType?: "IMAGE" | "MUSIC" | "VIDEO"
  request: (params?: any) => Promise<any>
  ListRender?: (record: any) => React.ReactElement
}
export default (props: ResourceListProps) => {
  const { request, ListRender } = props
  const { runAsync } = useRequest((params: any) => request(params), {
    manual: true,
  })
  const [list, hasMore, loadMore] = useInfiniteScroll(async (n, s) => {
    const res = await runAsync({ pageSize: s, pageNo: n })
    const { data } = res
    return { data: data?.data ?? data, total: data?.total ?? data?.length }
  })
  const [currentPlay, setCurrentPlay] = useState<any>()
  return (
    <>
      {ListRender ? (
        ListRender(list)
      ) : (
        <Box
          sx={{
            overflow: "auto",
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
            gap: 1,
          }}
        >
          {list?.map((item, index) => {
            return (
              <Box key={index}>
                <FilePreview
                  fileInfo={
                    window.alignConfig.blogSourceMinio +
                    "/memoryimage/" +
                    item?.name
                  }
                ></FilePreview>
              </Box>
            )
          })}
        </Box>
      )}
      <FileViewer visible={false}></FileViewer>
      <InfiniteScroll hasMore={hasMore} loadMore={loadMore}></InfiniteScroll>
    </>
  )
}
